<script lang="ts">
import { defineComponent, ref, h, resolveComponent, computed, toRaw } from 'vue'
import type { VNode, PropType, ConcreteComponent } from 'vue'
import { isObject, isString, isFunction } from 'lodash-unified'

export default defineComponent({
  props: {
    render: { type: [String, Object, Function] as PropType<ComponentRender>, required: true },
    args: { type: Array }
  },
  setup(props, { slots, attrs }) {
    const node = computed(() => {
      const render = props.render
      const args = props.args || []
      let component: string | ConcreteComponent = null
      let componentProps: any = attrs
      let componentSlots: any = slots

      if (isString(render)) {
        component = resolveComponent(render as string)
      }

      if (isObject(render)) {
        const renderOptions = render as ComponentRenderOptions
        component = resolveComponent(renderOptions.key)

        componentProps = renderOptions.props
        componentSlots = renderOptions.slots
      }

      if (isFunction(render)) {
        return render.call(null, ...args)
      }
      return h(component, componentProps, toRaw(componentSlots))
    })


    return () => node.value
  }
})


</script>
